<template>
  <div class="main-box content-box">
    <EcoForm ref="formRef" v-model="model" :items-props="itemProps">
      <template #age="{ model }">
        <el-input v-model="model.age" placeholder="自定义input"></el-input>
      </template>
      <!-- <template #operation>
        <el-button type="primary">自定义插槽提交</el-button>
      </template> -->
    </EcoForm>
    <div>
      <ElButton @click="click" type="primary">添加</ElButton>
      <ElButton @click="click1" type="primary">校验</ElButton>
      <ElButton @click="click2" type="primary">宽度</ElButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
import EcoForm, { type EcoFormProps } from '@/components/EcoForm/index.vue'
const formRef = ref<Omit<InstanceType<typeof EcoForm>, keyof ComponentPublicInstance | keyof EcoFormProps>>()
const click = () => {
  formRef.value?.addItems({
    formItem: { required: true },
    label: '选择器',
    prop: 'select',
    eTag: 'select',
    defaultValue: '1',
    rules: [{ required: true }],
    enum: [
      {
        label: 'option1',
        value: '1'
      },
      {
        label: 'option2',
        value: '2'
      }
    ]
  })
}
const click1 = () => {
  formRef.value?.form?.validate()
}
const click2 = () => {
  formRef.value?.setProps({
    formProps: {
      labelWidth: 120
    }
  })
}
const model = ref<Record<string, any>>({
  name: '',
  code: '1',
  age: 12
})
const options = [
  {
    value: '1',
    label: 'Option1'
  },
  {
    value: '2',
    label: 'Option2'
  }
]
const itemProps = reactive<EcoForm.Item[]>([
  {
    prop: 'name',
    label: '名称',
    eTag: 'input',
    props: {
      onChange: (val: any) => {
        console.log('val', unref(val))
      }
    },
    rules: [{ required: true, message: 'name is required', trigger: 'blur' }],
    span: 12
  },
  {
    prop: 'code',
    label: '编号',
    eTag: 'select',
    enum: options,
    props: {
      onChange: (val: any) => {}
    },
    span: 12
  },
  { prop: 'age', label: '自定义插槽', eTag: 'slot' }
])
</script>
<style lang="scss" scoped></style>
